<template>
  <view class="order-item-wrap">
    <view class="order-item">
      <c-img class="img" :src="attrs.smallImg" mode="aspectFill" @tap.stop="toGoods()" />
      <view class="order-item-next">
        <view class="row2 goods-name">{{ attrs.goodsName }}</view>
        <view>
          <view class="sku-name">{{ attrs.skuDesc }}</view>
        </view>
        <view class="flex-between">
          <c-number precision-mini :precision="2" class="price" prefix="￥" :value="attrs.salePrice" />
          <view class="qty">x{{ attrs.qty }}</view>
        </view>
      </view>
    </view>
    <view class="order-item-foot" >
      <slot></slot>
    </view>
    <!-- <view >小计：<c-number precision-mini :precision="2" class="price" prefix="￥" :value="attrs.goodsAmount" /></view> -->
  </view>
</template>
<script setup>
import { View } from '@tarojs/components';
import { CImg, CNumber } from '@/components';
import { useAttrs } from 'vue';
import { useRouter } from '@/hooks';

const router = useRouter();
const attrs = useAttrs();

const toGoods = () => {
  router.push('/pages/goods/info?id=' + attrs.goodsId);
};

</script>
<style lang="scss">
.order-item-wrap {
  border-bottom: var(--onepx) solid var(--color-line);
  &:last-of-type {
    border-bottom: 0;
  }
  .order-item {
    display: flex;
    align-items: stretch;
    padding: 30px 30px 10px;

    .img {
      flex-shrink: 0;
      width: 160px;
      height: 160px;
      margin-right: 20px;
      overflow: hidden;
      border-radius: 10px;
    }
    .order-item-next {
      display: flex;
      padding: 2px 0;
      flex-direction: column;
      flex-grow: 1;
      justify-content: space-between;
      .goods-name {
        margin-bottom: 12px;
      }
      .sku-name {
        display: inline-block;
        line-height: 36px;
        height: 36px;
        font-size: 22px;
        color: var(--color-gray);
        &:last-of-type {
          margin-right: 0;
        }
      }
      .price {
        color: var(--color-danger);
      }
      .qty {
        font-size: 24px;
      }
    }
  }
  .order-item-foot {
    padding: 0 30px 20px;
    font-size: 26px;
    text-align: right;
  }
}
</style>
